<template>
  <div id="compelte">
    <van-nav-bar
      title="请完善个人信息"
    />
    <van-cell-group>
      <van-field
        v-model="username"
        clearable
        label="姓名"
        required
        :error-message="errorMessage.name"
        icon="question"
        placeholder="请输入真实姓名"
        @click-icon="$toast('请输入真实姓名')"
      />

       <van-field
        v-model="phone"
        type="tel"
        label="手机号"
        required
        placeholder="请输入手机号"
        icon="question"
        :error-message="errorMessage.phone"
        @click-icon="$toast('请输入手机号')"

      />
       <van-field
        v-model="passwd"
        type="password"
        label="密码"
        required
        placeholder="请输入密码"
        icon="question"
        :error-message="errorMessage.passwd"
        @click-icon="$toast('请输入密码')"

      />
      <van-field
        v-model="email"
        type="email"
        label="邮件"
        required
        placeholder="请输入邮件地址"
        icon="question"
        :error-message="errorMessage.email"
        @click-icon="$toast('请输入邮件地址')"

      />
<!--
      <van-field
        v-model="sms"
        center
        clearable
        required
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <van-button slot="button" size="small" type="primary">发送验证码</van-button>
      </van-field> -->

      <!-- <van-radio-group v-model="radio">

          <van-cell title="我是HR" clickable @click="radio = '1'">
            <van-radio name="1" />
          </van-cell>
          <van-cell title="我是猎头" clickable @click="radio = '2'">
            <van-radio name="2" />
          </van-cell>

      </van-radio-group> -->
      <van-field
        v-model="sign"
        label="签名"
        type="textarea"
        placeholder="请输入个性签名"
        rows="1"
        autosize
        />
      <van-cell v-if="this.showrole" title="选择角色" is-link arrow-direction="down" :value="rolename" v-on:click="show=!show"/>
      <!-- <van-cell v-else title="我的角色"  :value="rolename"/> -->
      <van-actionsheet v-model="show" :actions="actions" />


    </van-cell-group>

    <div id="choose">
      <div class="chooseitem area van-hairline--bottom" >

    擅长行业
    <van-row class="line" type="flex" justify="left">
      <van-col span="8" ><van-checkbox v-model="areaType[0]">地产商业</van-checkbox></van-col>
      <van-col span="8" ><van-checkbox v-model="areaType[1]">制造业</van-checkbox></van-col>
      <van-col span="8" ><van-checkbox v-model="areaType[2]">消费及健康</van-checkbox></van-col>
    </van-row>
    <van-row  class="line" type="flex" justify="left">
      <van-col span="8" ><van-checkbox v-model="areaType[3]">金融</van-checkbox></van-col>
      <van-col span="8" ><van-checkbox v-model="areaType[4]">互联网</van-checkbox></van-col>
      <van-col span="8" ><van-checkbox v-model="areaType[5]">综合集团</van-checkbox></van-col>
    </van-row>
      </div>

      <div class="func chooseitem van-hairline--bottom">

擅长职能
    <van-row class="line" type="flex" justify="left">
      <van-col span="8" ><van-checkbox v-model="funcType[0]">财务金融</van-checkbox></van-col>
      <van-col span="8" ><van-checkbox v-model="funcType[1]">生产制造</van-checkbox></van-col>
      <van-col span="8" ><van-checkbox v-model="funcType[2]">营销管理</van-checkbox></van-col>
    </van-row>
    <van-row class="line" type="flex" justify="left">
      <van-col span="8" ><van-checkbox v-model="funcType[3]">人力管理</van-checkbox></van-col>
      <van-col span="8" ><van-checkbox v-model="funcType[4]">高层管理</van-checkbox></van-col>
    </van-row>


      </div>
    </div>

    <van-row style="background: white;padding-bottom:10px; position: absolute;bottom:0px;width:100%" type="flex" justify="center">
      <van-col span="18" ><van-button style="width:100%;margin-top:10px" type="primary" @click="valid">下一步</van-button></van-col>

    </van-row>
  </div>
</template>
<script>
import Config from '@/components/project.config.js'
export default {
  data(){
    return{
      showrole:true,
      errorMessage:{
        phone: '',
        name: '',
        email: '',
        passwd: ''
      },
      sign: '',
      sms: '',
      radio: 1,
      phone: '',
      username:'',
      show: false,
      email:'',
      role: -1,
      areaType:[false,false,false,false,false,false],
      funcType:[false,false,false,false,false],
      rolename:'请选择角色',
      actions: [
        {
          value: 2,
          name: '我是猎头',
          callback: this.onClick
        },
        {
          value: 1,
          name: '我是伯乐',
          callback: this.onClick
        },
      ]
    }

  },
  methods:{
    valid(){
      if(this.isPoneAvailable(this.phone)&&this.isPassAvailable(this.passwd)&&this.isEmailAvailable(this.email)){
        this.submit()
      }

    },
    isPoneAvailable(str) {
      var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
      if (!myreg.test(str)) {
          this.errorMessage.phone = '请输入正确手机号'
          return false;
      } else {
          this.errorMessage.phone = ''
          return true;
      }
    },
    isEmailAvailable(str) {
      var myreg=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
      if (!myreg.test(str)) {
          this.errorMessage.email = '请输入正确电子邮箱'
          return false;
      } else {
          this.errorMessage.email = ''
          return true;
      }
    },
    isPassAvailable(str) {
      // var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;s
      if (str.length < 6) {
          this.errorMessage.passwd = '请输入最少六位密码'
          return false;
      } else {
          this.errorMessage.passwd = ''
          return true;
      }
    },
    isNameAvailable(str) {
      var myreg=/^[\u4E00-\u9FA5]{1,5}$/;
      if (!myreg.test(str)) {
          this.errorMessage.name = '请输入正确姓名'
          return false;
      } else {
          this.errorMessage.name = ''
          return true;
      }
    },
    onClick(item){
      console.log(item)
      this.role = item.value
      this.rolename = item.name
      this.show=false
    },
    generateData(){
      var functions='',areas='';
      this.funcType.forEach((item,index)=>{
        if(item){
          functions = functions+(index+1)+'#'
        }
      })
      this.areaType.forEach((item,index)=>{
        if(item){
          areas = areas+(index+1)+'#'
        }
      })
      console.log(Object.assign({
        'areas' : areas,
        'functions': functions
      }))
      return Object.assign({
        'areas' : areas,
        'functions': functions
      })
    },
    submit(){
      this.generateData()
      console.log(this.$store.state)
      console.log(this.$route.params)
      this.$http.post(
        Config.baseUrl + '/api/fullinfo',
        Object.assign(this.generateData(),{
          userid: this.$route.params.user.id,
          role: this.role,
          realname: this.username,
          mobile: this.phone,
          email: this.email,
          passwd:this.passwd
        })
        ).then(function(rsp){
          if(rsp.data.code==1){
            this.$store.commit('setUser',rsp.data.data)
            this.$router.push({
              name: 'index'
            })
          }else{
            this.$toast(rsp.data.message)
          }
      },function(error){
        console.log(error)
      })
    }
  },
  mounted(){
    this.$store.commit('hideTab')
    console.log(this.$route)
    if(this.$route.query.role){
      this.role = this.$route.query.role
      this.showrole = false
    }
  }
}
</script>

<style lang="stylus" scoped>
#choose{
  background white
  font-size 1rem
  padding 4px 14px
}
.chooseitem{
  padding 8px 0px
}
#choose .line{
  margin 3px 0;
}
</style>
